<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>04css단위박스테두리</title>
		<style type="text/css">
			#no1 { font-size: 2em; }
			#no2 { font-size: 1.5em; }
			#no3 { font-size: 1.125em; }
			#no4 { font-size: 1em; }
			
			#c01 { color: red; }
			#c02 { color: green; }
			#c03 { color: blue; }
			#c04 { color: #FF0000; }
			#c05 { color: #008000; }
			#c06 { color: #0000FF; }
			#c07 { color: rgb(255, 0, 0); }
			#c08 { color: rgb(0, 120, 0); }
			#c09 { color: rgb(0, 0, 255); }

			#c10, #c11, #c12 {width: 250px; height: 150px;}
			#c10 { background-color: rgba(255, 0, 0, 1); }
			#c11 { background-color: rgba(255, 0, 0, 0.5); }
			#c12 { background-color: rgba(255, 0, 0, 0.1); }
			
			#sujin01 { width: 604px; height: 431px; background-image: url("images/suzy/001.jpg")}
			
/*			#b01, #b02, #b03, #b04, #b05 { width: 250px; height: 150px; }*/
			.boxclass { width: 250px; height: 100px; }
			#b01 { background: yellow; margin: 10px; /* 상하좌우 */ padding: 10px; border: 3px solid navy;}										
			#b02 { background: rgba(255, 0, 0, 0.5); margin: 10px 15px; /* 상하  좌우 */padding: 10px 15px; border: 3px solid black;}
			#b03 { background: rgba(255, 255, 0, 0.5); margin: 5px 10px 15px 20px; /* 상 우 하 좌 */padding: 5px 10px 15px 20px; border: 3px solid green;}
			#b04 { background: rgba(100, 255, 0, 0.5); border: 3px dashed red;}
			
			#b05 { border: 5px double red; }
			#b06 { border: thick dotted blue; border-radius: 15px; }
			#b07 { border: thin groove orange; border-radius: 15px 20px 25px 30px; }
			
		</style>
	</head>

	<body>
		<h1>CSS단위박스테두리</h1>
		<h2>CSS 단위</h2>
		<p id="no1">H1 태그 기본 크기는 32px, 200%, 2em</p>
		<p id="no2">H2 태그 기본 크기는 24px, 150%, 1.5em</p>
		<p id="no3">H3 태그 기본 크기는 18px, 133%, 1.125em</p>
		<p id="no4">body 태그 기본 크기는 16px, 100%, 1em</p>
		
		<hr />
		<h2>색상 단위</h2>
		<p>색상이름 color name : 
			<span id="c01">red</span>,
			<span id="c02">green</span>,
			<span id="c03">blue</span>
		</p>
		<p>16진수 코드 hex code : 
			<span id="c04">red</span>,
			<span id="c05">green</span>,
			<span id="c06">blue</span>
		</p>
		<p>RGB 색상값 : 
			<span id="c07">red</span>,
			<span id="c08">green</span>,
			<span id="c09">blue</span>
		</p>
		<div id="c10">투명도 rgba()</div>
		<div id="c11">투명도 rgba()</div>
		<div id="c12">투명도 rgba()</div>
		
		<hr />
		<h2>URL 단위</h2>
		<div id="sujin01">&nbsp;</div>
		
		<hr />
		<h2>CSS 박스모델 특성</h2>
		<p id="b01" class="boxclass">모든 html 요소들은 박스로 인식될 수 있음</p>
		<p id="b02" class="boxclass">html 요소에 적용된 박스는 다음의 특성이 존재함 : 안쪽/바깥쪽 여백, 테두리</p>
		<p id="b03" class="boxclass">박스의 크기는 width, height로 지정</p>
		<p id="b04" class="boxclass">박스의 여백은 margin, padding으로 지정</p>
		<p id="b05" class="boxclass">박스의 테두리는 border로 지정</p>
		<p>CSS 박스모델로 컨텐츠를 배치하다보면 margin병합현상이 발생됨<br />
			두 박스를 수직으로 배치하는 경우 각 박스의 margin중 가장 큰 값으로 적용
		</p>
		
		<hr />
		<h2>CSS 테두리</h2>
		<p id="b06">테두리 두께, 테두리 종류, 테두리 색깔</p>
		<p id="b07">CSS3에 추가된 border-radius는 모서리를 둥글게 만들수 있게 해 줌</p>
		
		<hr />
		<h2>박스 그림자 : box-shadow</h2>
		<p style="width: 300px; height: 100px; background: red; box-shadow: 5px 5px 5px orange;"> </p>
		
		<hr />
		<h2>그라디언트 : gradient</h2>
		<p style="width: 350px; height: 100px; background: linear-gradient(135deg, #ffffff 0%, #000000 100%); "> </p>
		<p style="width: 350px; height: 100px; background: linear-gradient(red, blue); "> </p>
		<p style="width: 350px; height: 100px; background: linear-gradient(to bottom right, orange, red); "> </p>
		<p style="width: 550px; height: 100px; background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); "> </p>
		<p style="width: 550px; height: 100px; background: radial-gradient(red, orange, yellow, green, blue, indigo, violet); "> </p>
		
	</body>
</html>
